<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="room-form" v-if="item" v-cloak>
        <el-form size="small" label-width="100px" label-position="right" v-loading="loading">
            <el-form-item label="楼栋/单元">
                <el-input size="mini" v-model="item.building" minlength="0" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="楼层">
                <el-input size="mini" v-model="item.floor" minlength="0" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="房号">
                <el-input size="mini" v-model="item.name" minlength="0" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="总价(万)">
                <el-input size="mini" v-model="item.total_price" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="面积(㎡)">
                <el-input size="mini" v-model="item.area" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="均价(万))">
                <el-input size="mini" v-model="item.average_price" style="width: 200px"></el-input>
            </el-form-item>

            <el-form-item label="户型">
                <el-input size="mini" v-model="item.typename" style="width: 200px"></el-input>
            </el-form-item>

            <!-- TODO el-form-item label="户型图">
        <div class="types">
          <div class="type-item" v-for="t,i in types">
            <el-image :src="t.image" />
          </div>
        </div>
      </el-form-item -->

            <el-form-item label="状态">
                <el-select v-model="item.status_id">
                    <el-option v-for="(s, index) in statusItems" :key="index" :label="s.name" :value="s.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="">
                <el-button v-loading="loading" :disabled="loading" type="primary" @click="submitHandle" icon="el-icon-check"
                    size="small">确定</el-button>
                <el-button v-if="item.id" v-loading="loading" :disabled="loading" type="danger" @click="deleteHandle" icon="el-icon-delete"
                    size="small">删除</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { updateBuildingRoom, createBuildingRoom, deleteBuildingRoom } from "@/api/post";
export default {
    data () {
        return {
            loading: false,
            positions: ["东", "南", "西", "北", "其它"],
        };
    },
    props: {
        types: { type: Array, default: [] },
        statusItems: { type: Array, default: [] },
        item: { type: Object, default: null },
    },

    mounted: function () { },

    computed: {},

    methods: {
        deleteHandle: function () {
            this.$confirm("确定要删除" + this.item.name + "这个房间吗？").then(() => {
                this.loading = true;
                deleteBuildingRoom(this.item.id).then(() => {
                    this.loading = false;
                    this.$emit("change", null);
                }).catch((err) => {
                    this.loading = false
                    console.log(err);
                });
            });
        },

        submitHandle: function () {
            var data = this.item;
            this.loading = true;
            if (!data.id) {
                createBuildingRoom(data).then((resp) => {
                    this.loading = false;
                    if (resp.status == 0) {
                        this.$message.success("已保存");
                        this.$emit("change", null);
                    }
                }).catch((err) => {
                    this.loading = false
                    console.log(err);
                });

                return;
            }
            updateBuildingRoom(data).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.$message.success("已保存");
                    this.$emit("change", null);
                }
            }).catch((err) => {
                this.loading = false
                console.log(err);
            });
        },
    },
};
</script>

<style scoped>
.room-form {
    margin-top: 20px;
}
</style>
